<div class="flex-auto pt-6 sm:px-4 sm:pb-4">
    <mat-tab-group [animationDuration]="'0'">

        <mat-tab label="Details">
            @if (agentDetails()) {
                <agent-details [agentDetails]="agentDetails()!" (refreshRequested)="handleRefreshAgentDetails()"></agent-details>
            } @else {
                <!-- Optional: loading or placeholder for details tab -->
            }
        </mat-tab>

        <mat-tab label="Memory">
            @defer {
                @if (agentDetails()) {
                    <agent-memory [agentDetails]="agentDetails()"></agent-memory>
                }
            }
        </mat-tab>

        <mat-tab label="Function Calls">
            @defer {
                @if (agentDetails()) {
                    <agent-function-calls [agentDetails]="agentDetails()"></agent-function-calls>
                }
            }
        </mat-tab>

        @if (agentDetails()?.type === 'autonomous') {
            <mat-tab label="Iterations">
                @defer {
                    <agent-iterations [agentId]="agentDetails()?.agentId"></agent-iterations>
                }
            </mat-tab>
        }

        <mat-tab label="Tool State">
            @defer {
                @if (agentDetails()) {
                    <agent-tool-state [agentDetails]="agentDetails()!"></agent-tool-state>
                }
            }
        </mat-tab>

        <mat-tab label="LLM Calls">
            @defer {
                <agent-llm-calls [agentId]="agentDetails()?.agentId"></agent-llm-calls>
            }
        </mat-tab>

    </mat-tab-group>
</div>
